<template>
  <div class="nav">
    <div
      class="addbox"
      style="
        display: flex;
        width: 750px;
        height: 100px;
        text-align: center;
        padding: 10px;
      "
    >
      <img
        src="../../../components/My/image/weibiaoti.png"
        alt=""
        style="width: 30px; height: 40px;"
        @click="onClickLeft()"
      />
      <p style="font-size: 34px; flex: 1;">添加化妆品</p>
      <p style="font-size: 20px; margin-top: 15px;">保存</p>
    </div>
    <div class="box1">
      <p>产品</p>
      <input type="text" placeholder="请输入产品名称" />
    </div>
    <div class="box1">
      <p>分类</p>
      <input type="text" placeholder="请选择" @click="goNext1" />
    </div>
    <div class="box1">
      <p>生产日期</p>
      <input type="text" placeholder="请输入" />
    </div>
    <div class="box1">
      <p>过期日期</p>
      <input type="text" placeholder="请输入" />
    </div>
    <div class="box1">
      <p>是否开封</p>
      <van-radio-group v-model="radio" direction="horizontal">
        <van-radio name="1" icon-size="20" @click="dian1">已开封</van-radio>
        <van-radio name="2" icon-size="20" @click="dian2">未开封</van-radio>
      </van-radio-group>
    </div>
    <div class="box1" v-show="yyds">
      <div class="box3">
        <p>备注</p>
        <input type="text" placeholder="写下你对这款产品的的使用感受吧～" />
      </div>
    </div>
    <div class="box2" v-show="falg">
      <div class="box1">
        <p>开封日期</p>
        <input type="text" placeholder="请选择" />
      </div>
      <div class="box1">
        <p>开封保质期</p>
        <input type="text" placeholder="请选择" />
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data() {
    return {
      falg: false,
      yyds: true,
      radio: '',
    }
  },
  methods: {
    onClickLeft() {
      // Toast('返回')
      this.$router.push({ name: 'index' })
    },
    onClickRight() {
      Toast('保存成功')
    },
    dian1() {
      this.falg = true
      this.yyds = false
    },
    dian2() {
      this.falg = false
      this.yyds = true
    },

    goNext1() {
      console.log(1)
      this.$router.push({ name: 'classify' })
    },
  },
}
</script>

<style lang="scss" scoped>
.nav {
  width: 750px;
  height: 1624px;
}
.yin {
  display: none;
}

.box1 {
  width: 595.5px;
  height: 126.5px;
  margin: 0 auto;
  border-bottom: 1px solid #333333;
  margin-bottom: 30px;
}
.box1 p {
  font-size: 30px;
  margin-bottom: 30px;
}
.box1 input {
  border: none;
  font-size: 24px;
}
.box1 {
  .van-radio__label {
    font-size: 24px;
  }
  .van-radio-group {
    height: 30px;
  }
}
</style>
